<template>
  <view>
    <view class="custom-nav-bar">
      <image src="/static/message/rectangle77.png" class="nav-bar-bg1" mode="aspectFill"></image>
        <image src="/static/message/Arrow_left_arrow-left (1).png" mode="" class="nav-bar-bg2" @click="navBack"></image>
      <text class="nav-title">{{ text }}</text>
      <image :src="pic" mode="" class="nav-bar-bg3" @click="open()"></image>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-message-top",
    data() {
      return {
        
      };
    },
    props:{
      text:{
        type: String,
        default: '互动消息'
      },
      pic:{
        type: String,
        default: ''
      }
    },
    methods:{
      navBack(){
        uni.navigateBack({
        	delta: 1
        });
      },
      open(){
         this.$emit('open','666')
      }
    }
  }
</script>

<style lang="scss">
.custom-nav-bar {  
  position: relative;   
 height: 220rpx; 
    
  .nav-bar-bg1 {
    position: absolute;
    top: -6rpx;
    left: 0;  
    right: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1;
  }  
  .nav-bar-bg2{
    position: absolute;
    top: 80rpx;
    left: 35rpx;
    width: 64rpx;
    height: 64rpx;
  }
  .nav-title {  
    position: absolute;
    font-size: 25px;
    font-weight: bold;  
    color: #666666;  
    top: 80rpx;
    left: 275rpx;
    z-index: 999;
  }
  .nav-bar-bg3{
    position: absolute;
    top: 135rpx;
    right: 35rpx;
    width: 64rpx;
    height: 64rpx;
  }
}
</style>